import React, { useState } from 'react'
import './TodoHeader.css'
export default function TodoHeader(props) {
  let {addTodo} = props;
  let [title,setTitle] = useState('')
  let inputChange = (e) => {
      setTitle(e.target.value)
  }
  let keyDown = (e) => { 
    if(e.keyCode===13 && title.length){
      addTodo(title);
      setTitle('');
    }

  }
  return (
    <div className="todo-header">
        <input onKeyDown={keyDown} onChange={inputChange} value={title} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}
